<template>
  <a-spin :spinning="loading">
    <div class="manage-list__box">
      <a-page-header
        style="border: 1px solid rgb(235, 237, 240)"
        title="菜单模型列表"
      >
        <template slot="extra">
          <a-button key="addNew" type="primary" @click="setModelVisible(true)">
            新增菜单模型
          </a-button>
        </template>
      </a-page-header>
      <a-table
        :pagination="false"
        :columns="columns"
        :data-source="listData"
        size="middle"
      >
        <a
          slot="action"
          slot-scope="text, record, index"
          @click.stop="openDetail({ text, record, index })"
          >查看</a
        >
        <template
          v-for="col in ['menu_name', 'permission']"
          :slot="col"
          slot-scope="text, record"
        >
          <div :key="col">
            <a-input
              v-if="record.editable"
              style="margin: -5px 0"
              :value="text"
              @change="(e) => handleChange(e.target.value, record.id, col)"
            />
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template slot="operation" slot-scope="text, record">
          <span v-if="record.editable">
            <a @click="() => save(record.id)">保存</a>
            <a-divider type="vertical" />
            <a @click="() => cancel(record.id)">取消</a>
          </span>
          <span v-else>
            <a @click="() => edit(record.id)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm
              :title="`确认删除${record.menu_name}吗？`"
              @confirm="() => onDelete(record)"
            >
              <a>删除</a>
            </a-popconfirm>
          </span>
        </template>
      </a-table>
      <menuDetail
        :handleClose="() => setModelVisible(false)"
        v-if="modelVisible"
        :modelVisible="modelVisible"
        :activeModel="activeModel"
        :menuList='menuList'
        :updateModelAction='updateModelAction'
      ></menuDetail>
    </div>
  </a-spin>
</template>

<script>
import menuDetail from "./components/menuDetail.vue";
import {
  GET_LIST_ACTION,
  SET_LIST_MUTATION,
  SET_LOADING_MUTATION,
  UPDATE_MODEL_ACTION,
  SET_EDITING_KEY_MUTATION,
  SET_MODEL_MUTATION,
  SET_ACTIVE_MODEL_MUTATION
} from "./store/constants";
import { mapState, mapActions, mapMutations} from "vuex";
// import { formatArr2Tree } from "@/utils/tools";
export default {
  name: "List",
  data() {
    return {
      columns: [
        {
          title: "模型名称",
          dataIndex: "menu_name",
          key: "menu_name",
          scopedSlots: { customRender: "menu_name" },
        },
        {
          title: "所属权限",
          dataIndex: "permission",
          key: "permission",
          scopedSlots: { customRender: "permission" },
        },
        {
          title: "菜单详情",
          dataIndex: "action",
          key: "action",
          scopedSlots: { customRender: "action" },
        },
        {
          title: "操作",
          dataIndex: "operation",
          key: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      activeIndex: -1,
    };
  },
  computed: {
    ...mapState({
      loading: (state) => state.Model.loading,
      listData: (state) => state.Model.listData,
      menuList: (state) => state.Menu.data,
      modelVisible: (state) => state.Model.modelVisible,
      activeModel: (state) => state.Model.activeModel,
    }),
  },
  components: { menuDetail },
  methods: {
    edit(key) {
      const newData = [...this.data];
      const target = this.listData.filter((item) => key === item.id)[0];
      this.setEditingKey(key);
      if (target) {
        target.editable = true;
        this.setData(newData);
      }
    },
    save() {},
    cancel() {},
    /**
     * mapMutations把vuex Mutations里面的方法拿到当前页面来 这是用来更新store里面的值 同步执行
     */
    ...mapMutations({
      setData: `Model/${SET_LIST_MUTATION}`,
      setLoading: `Model/${SET_LOADING_MUTATION}`,
      setEditingKey: `Model/${SET_EDITING_KEY_MUTATION}`,
      setModelVisible: `Model/${SET_MODEL_MUTATION}`,
      setActiveModel: `Model/${SET_ACTIVE_MODEL_MUTATION}`,
    }),
    /**
     * mapActions把vuex actions里面的方法拿到当前页面来 这是用来处理异步以及复杂业务 通过await实现同步执行
     */
    ...mapActions({
      getListAction: `Model/${GET_LIST_ACTION}`,
      // addMenuAction: `model/${ADD_MENU_ACTION}`,
      // deleteMenuAction: `model/${DELETE_MENU_ACTION}`,
      updateModelAction: `Model/${UPDATE_MODEL_ACTION}`,
      getMenuListAction: `Menu/${GET_LIST_ACTION}`,
    }),
    onCellChange() {
      console.log(arguments);
    },
    handleChange() {},
    onDelete() {},
    openDetail(parm) {
      console.log(parm)
      this.setActiveModel(parm.index)
      this.setModelVisible(true)
    },
  },
  created() {
    this.getListAction();
  },
};
</script>

<style lang="less" scoped>
.manage-list__box {
  padding: 20px;
}
</style>
